<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本元素</title>
</head>
<body>
    <hr/>
    <b>文本元素</b><br/>
    
    b 元素 这是 <b>HTML5</b> 教程<br/>
    strong 元素 这是<strong>HTML5</strong> 教程<br/><br/>

    i 元素 这是<i>HTML5</i> 教程<br/>
    em 元素 这是<em>HTML5</em> 教程<br/><br/>

    s 元素 这是<s>HTML5</s> 教程<br/>
    del 元素 这是<del>HTML5</del> 教程<br/><br/>

    u 元素 这是<u>HTML5</u> 教程<br/>
    ins 元素 这是<ins>HTML5</ins> 教程<br/><br/>

    small 元素 这是<small>HTML5</small> 教程<br/><br/>

    sub 元素 这是HTML<sub>5</sub> 教程<br/>
    sup 元素 这是HTML<sup>5</sup> 教程<br/><br/>

    abbr 表缩 <abbr>HTML5</abbr><br/>

    dfn 定义术语 <dfn>HTML5</dfn><br/>

    q 引用 <q>HTML5</q><br/>
    cite 引用标题 <cite>HTML5</cite><br/>
    
    bdo 元素 文本方向 <bdo dir="rtl">文本从右向左</bdo><br/>
    mark 标记 <mark>标记</mark><br/>
    time 时间 <time>2015/3/30</time>

    <hr />
    <b>超链接</b><br/>
    <a href="http://www.baidu.com">百度</a><br/>
    <a href="http://www.baidu.com" target="_blank">新窗口打开百度</a><br/>
    <a href="#a3">定位到锚点3 </a>
    <hr />
    <b>分组元素</b><br/>
    <p>段落1</p>
    <p>段落2</p>
    <div>通用分组1</div>
    <div>通用分组2</div>
    <blockquote> blockqute 元素  电子书《三国演义》  |  作者:罗贯中
        更多精品小说下载|在线阅读访问云轩阁小说网 www.yxg.cc 或手机访问 wap.yxg.cc ,更新时间:2010-4-14 3:20:54
        《三国演义》简介:   《三国演义》是我国最早的一部长篇章回体历史小说，描写了三国时期的历史故事，集体表现了统治者之间政治和军事斗争。该书最早的版本是明嘉靖元年刊印的《三国志通俗演义》，分24卷，240则，每则一个七言标题。此后新的刊本迭出，卷数、回目、引用诗词等均有改动。清康熙时，毛纶、毛宗岗父子对《三国志演义》进行了修订，遂成为最通行的本子。今有人民文学出版社1973年版。        《三国演义》全称《三国志通俗演义》。我国古代历史演义小说的代表作。明代小说家罗贯中依据有关三国的历史、杂记，在广泛吸取民间传说和民间艺人创作成果的基础上，加工、再创作了这部长篇章回小说。作品写的是汉末到晋初这一历史时期魏、蜀、吴三个封建统治集团间政治、军事、外交等各方面的复杂斗争。通过这些描写，揭露了社会的黑暗与腐朽，谴责了统治阶级的残暴与奸诈，反映了人民在动乱时代的苦难和明君仁政的愿望。小说也反映了作者对农民起义的偏见，以及因果报应和宿命论等思想。战争描写是《三国演义》突出的艺术成就。这部小说通过惊心动魄的军事、政治斗争，运用夸张、对比、烘托、渲染等艺术手法，成功地塑造了诸葛亮、曹操、关羽、张飞等一批鲜明、生动的人物形象。《三国演义》结构宏伟而又严密精巧，语言简洁、明快、生动。有的评论认为这部作品在艺术上的不足之处是人物性格缺乏发展变化，有的人物渲染夸张过分导致失真。《三国演义》标志着历史演义小说的辉煌成就。在传播政治、军事斗争经验、推动历史演义创作的繁荣等方面都起过积极作用。《三国演义》的版本主要有明嘉靖刻本《三国志通俗演义》和清毛宗岗增删评点的《三国志演义》。
    </blockquote>
    <ul>
        <li>张三</li>
        <li>李四</li>
        <li>王五</li>
        <li>马六</li>
    </ul>
    <ol>
        <li>张三</li>
        <li>李四</li>
        <li>王五</li>
        <li>马六</li>
    </ol>
    <div>说明列表</div>
    <dl>
        <dt>这是第一份文件</dt>
        <dd>详细内容1</dd>
        <dd>详细内容2</dd>
        <dt>第二份文件</dt>
        <dd>详细内容3</dd>
        <dd>详细内容4</dd>
    </dl>
    <div>插图</div>
    <figure>
        <figcaption>这是一张图片</figcaption>
        <img src="abc.png"/>
    </figure>
    <span id="a3">锚点3 </span><br/>

    <b>表格元素</b><br/>
    <table border="1">
        <tr>
            <td>张三</td>
            <td>男</td>
            <td>已婚</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>女</td>
            <td>未婚</td>
        </tr>
    </table>
    <table border="1" style="width:300px;">
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>婚否</th>

        </tr>
        <tr>
            <td>张三</td>
            <td>男</td>
            <td>已婚</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>女</td>
            <td>未婚</td>
        </tr>
    </table>
    <table border="1" style="width:300px;">
        <tr>
            <th rowspan="4">基本情况</th>
            <th>姓名</th>
            <th>性别</th>
            <th>婚否</th>

        </tr>
        <tr>
            <td>张三</td>
            <td>男</td>
            <td>已婚</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>女</td>
            <td>未婚</td>
        </tr>
        <tr>
            <td colspan="3">总计:共两人</td>
        </tr>
    </table>
    <table border="1" style="width:300px;">
        <caption>某某表格</caption>
        <thead>
            <tr>
                <th>姓名</th>
                <th>性别</th>
                <th>婚否</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>张三</td>
                <td>男</td>
                <td>已婚</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>女</td>
                <td>未婚</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td colspan="3">总计:共两人</td>
            </tr>
        </tfoot>
    </table>
    <hr />
    <b>文档元素</b><br/>
    <hr />
    <b>嵌入元素</b><br/>
    img 是内联元素
    <img src="0016.jpg" alt="美女">
    <a href="#"><img src="0016.jpg" alt="美女" ismap /></a></br/>
    <u>iframe 元素</u></br/>
    iframe 和 a 都是内联元素
    <a href="http://www.baidu.com" target="in">百度</a> | <a href="http://www.haosou.com" target="in">好搜</a> <br />
    <iframe src="http://www.baidu.com" frameborder="0" name="in"></iframe>
    <br />
    进度条(内联元素)
    <progress value="30" max="100"></progress>
    <br/>
    范围值(内联元素)
    <meter value="30" max="100"></meter>
    <meter value="30" low="40" max="100"></meter>
    <meter value="90" low="40" high="80" max="100"></meter>
    <meter value="60" optimum="60" low="40" high="80" max="100"></meter>
    <br/>
    <hr />
    <b>音频和视频</b><br/>
    <video src="001.mp4" width="640" height="480" controls loop muted poster="0016.jpg"></video>
    <video src="001.mp4" width="640" height="480" controls preload="auto"></video> <!--页面载入后自动加载-->
    <audio src="background.mp3" controls></audio>
    <hr />

</body>
</html>